<template>
  <el-row>
    <el-col :span="4"><div class="plan">
      <el-container>
        <el-header> <div class="grid-content">
          <el-input
            @keyup.enter.native="handleFilter"
            v-model="listQuery.key"
            placeholder="请输入内容"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div></el-header>

        <el-main>
          <div class="grid-content">

            <el-table  :data="list" v-loading="listLoading" element-loading-text="不需要时间" border fit
                       highlight-current-row style="width: 100%">
              <el-table-column align="center" label="姓名">
                <template scope="scope">
                  <span>
                      <el-button class="filter-item" type="primary" size="mini"   @click="handleOne(scope.row.guid)">{{ scope.row.name }}</el-button>
                    </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="目前余额">
                <template scope="scope">
                  <span>{{ scope.row.balance }}</span>
                </template>
              </el-table-column>
            </el-table>

          </div></el-main>

      </el-container>
    </div></el-col>
    <el-col :span="12"><div >


      <el-collapse v-model="activeNames" >
        <el-collapse-item title="个人信息" name="1">
          <el-row>
            <el-col :span="6">{{caseInfo.name}} :</el-col>
            <el-col :span="9">催收金额:{{caseInfo.balance}}</el-col>
            <el-col :span="9">性别:{{caseInfo.sex}}</el-col>
          </el-row>
          <hr/>
          <el-row>

          <el-col :span="6">电话号码:{{caseInfo.mobile}}</el-col>
          <el-col :span="9">身份证:{{caseInfo.certno}}</el-col>
            <el-col :span="9">部门:{{caseInfo.deptname}}</el-col>
          </el-row>
          <hr/>
          <el-row>
            <el-col :span="6">家庭电话:{{caseInfo.hometel}}</el-col>
            <el-col :span="9">电子邮件:{{caseInfo.email}}</el-col>
            <el-col :span="9">卡号:{{caseInfo.cardno}}</el-col>

          </el-row>

        </el-collapse-item>
        <el-collapse-item title="卡信息" name="2">

          <div>支行:{{caseInfo.subBranch}}</div>
          <div>属性:{{caseInfo.caseproperty}}</div>
          <div>案件类型:{{caseInfo.casetype}}</div>
        </el-collapse-item>

        <el-collapse-item title="地址信息" name="3">
          <div>地址:{{caseInfo.addr}}</div>
          <div>家庭地址:{{caseInfo.homeaddr}}</div>
          <div>部门地址:{{caseInfo.deptaddr}}</div>
        </el-collapse-item>


      </el-collapse>
      <!-- 基本信息 结束-->

      <el-row>
        <el-form :model="ruleForm2" ref="ruleForm2"   label-width="100px" class="demo-ruleForm">

          <el-form-item label="用户名" prop="username" v-show="false">
            <el-input  type="hidden" :value="caseInfo.name"  ></el-input>
          </el-form-item>

          <el-form-item label="手机号" prop="cellphone">
            <el-input  v-model="ruleForm2.cellphone" placeholder="验证码登录使用"></el-input>
          </el-form-item>

          <el-form-item label="对象" prop="cname">
            <el-input v-model="ruleForm2.cname" placeholder="通话人"></el-input>
          </el-form-item>

          <el-form-item label="还款时间" prop="paytime">
            <el-input v-model="ruleForm2.paytime" placeholder="承诺还款时间"></el-input>
          </el-form-item>
          <el-form-item label="态度" prop="result">
            <el-input v-model="ruleForm2.result" placeholder="态度"></el-input>
          </el-form-item>


          <el-form-item label="催收内容" prop="content">
            <el-input type="textarea" rows="4" v-model="ruleForm2.content" placeholder="催收内容"></el-input>
          </el-form-item>
<!--
          <el-form-item label="备注" prop="attitude">
            <el-input type="textarea" rows="4" v-model="ruleForm2.attitude" placeholder="备注"></el-input>
          </el-form-item>
-->
          <el-form-item label="是否隐藏" prop="display">
            <el-switch v-model="ruleForm2.display"></el-switch>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
            <el-button @click="resetForm('ruleForm2')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <!-- 下-->





    </div>
    </el-col>
    <el-col :span="8"><div class="plan">
      <template>
        <el-tabs  value="first">
          <el-tab-pane label="通话记录"  name="first">

            <el-dialog title="查看通话记录" :visible.sync="conectionFormVisible">

              <el-form :model="conectionform" ref="conectionform"   label-width="100px" class="demo-ruleForm">

                <el-form-item label="用户名" prop="username" v-show="false">
                  <el-input    v-model="conectionform.cellphone"  ></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="cellphone">
                  <el-input  v-model="conectionform.cellphone"></el-input>
                </el-form-item>

                <el-form-item label="对象" prop="cname">
                  <el-input v-model="conectionform.cname" placeholder="通话人"></el-input>
                </el-form-item>

                <el-form-item label="还款时间" prop="paytime">
                  <el-input v-model="conectionform.paytime" placeholder="承诺还款时间"></el-input>
                </el-form-item>
                <el-form-item label="态度" prop="result">
                  <el-input v-model="conectionform.result" placeholder="态度"></el-input>
                </el-form-item>


                <el-form-item label="催收内容" prop="content">
                  <el-input type="textarea" rows="4" v-model="conectionform.content" ></el-input>
                </el-form-item>

<!--
                <el-form-item label="备注" prop="attitude">
                  <el-input type="textarea" rows="4" v-model="conectionform.attitude"></el-input>
                </el-form-item>
-->

              </el-form>
            </el-dialog>

            <el-table  :data="telList" v-loading="tellistLoading" element-loading-text="不需要时间" border fit highlight-current-row style="width: 100%">


              <el-table-column align="center" label="通话人">
                <template scope="scope">
                  <el-button size="small" type="success" @click="handleUpdate(scope.row)">{{ scope.row.cname  }}
                  </el-button>

                </template>
              </el-table-column>

              <el-table-column align="center" label="通话号码">
                <template scope="scope">
                  <span>{{ scope.row.cellphone }}</span>
                </template>
              </el-table-column>

              <el-table-column align="center" label="催收结果">
                <template scope="scope">
                  <span>{{ scope.row.resutl }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="联系人" name="second">

            <el-dialog title="创建联系人" :visible.sync="dialogFormVisible">

              <el-form :model="ruleForm3" ref="ruleForm3"   label-width="100px" class="demo-ruleForm">

                <el-form-item label="姓名" prop="name">
                  <el-input  v-model="ruleForm3.name" placeholder="姓名"></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="cellphone">
                  <el-input  v-model="ruleForm3.cellphone" placeholder="手机号"></el-input>
                </el-form-item>

                <el-form-item label="关系" prop="relation">
                  <el-input v-model="ruleForm3.relation" placeholder="关系"></el-input>
                </el-form-item>


                <el-form-item label="备注" prop="remark">
                  <el-input type="textarea" rows="4" v-model="ruleForm3.remark" placeholder="备注"></el-input>
                </el-form-item>


                <el-form-item>
                  <el-button type="primary" @click="submitForm3('ruleForm3')">提交</el-button>

                </el-form-item>
              </el-form>
            </el-dialog>


            <el-button class="filter-item" style="margin-left: 10px;" size="mini" @click="handleCreate" type="success" icon="edit">添加联系人</el-button>
            <el-table  :data="contactsList" v-loading="tellistLoading" element-loading-text="不需要时间" border fit
                       highlight-current-row style="width: 100%">
              <el-table-column align="center" label="序号">
                <template scope="scope">
                  <span>{{ scope.$index+1 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="姓名">
                <template scope="scope">
                  <el-button class="filter-item" type="primary" size="mini"
                             @click="selectOne(scope.row)">{{ scope.row.name }}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" label="关系">
                <template scope="scope">
                  <span>{{ scope.row.relation }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="通话号码">
                <template scope="scope">
                  <span>{{ scope.row.cellphone }}</span>
                </template>
              </el-table-column>

              <el-table-column align="center" label="备注">
                <template scope="scope">
                  <span>{{ scope.row.remark }}</span>
                </template>
              </el-table-column>
            </el-table>

          </el-tab-pane>

          <el-tab-pane label="回款信息" name="third">
            <el-table  :data="backmoneyList" element-loading-text="不需要时间" border fit
                       highlight-current-row style="width: 100%">

              <el-table-column align="center" label="入账时间">
                <template scope="scope">
                {{ scope.row.imptime }}

                </template>
              </el-table-column>
              <el-table-column align="center" label="入账">
                <template scope="scope">
                  <span>{{ scope.row.inmoney }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="结欠金额">
                <template scope="scope">
                  <span>{{ scope.row.duemoney }}</span>
                </template>
              </el-table-column>

              <el-table-column align="center" label="最新余额">
                <template scope="scope">
                  <span>{{ scope.row.balance }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

        </el-tabs>
      </template>
    </div>


    </el-col>
  </el-row>




</template>
<script>
  /* eslint-disable space-before-blocks,semi */


  import { getCaseObj,fetchList,telList,contactsList,backmoneyList } from '@/api/case_info';
  import waves from '@/directive/waves/index.js' // 水波纹指令
  import { mapGetters } from 'vuex'
  import request from "@/router/axios";

  import ElHeader from "../../../../node_modules/element-ui/packages/header/src/main";
  import ElMain from "../../../../node_modules/element-ui/packages/main/src/main";
  import ElFooter from "../../../../node_modules/element-ui/packages/footer/src/main";
  import ElFormItem from "element-ui/packages/form/src/form-item.vue";

  export default {
    name: 'case_info',
    directives: {
      waves
    },
    computed: {
      ...mapGetters([
        'permissions'
      ])
    },
    components: {
      ElFooter,
      ElMain,
      ElHeader},
    data() {
      return {
        list: null,
        telList:null,
        contactsList:null,
        backmoneyList:null,
        tellistLoading: true,
        dialogFormVisible: false,
        conectionFormVisible:false,
        conectionform: {
          cid:'',
          cname: '',
          cellphone: '',
          promisemoney: '',
          paytime: '',
          resutl:'',
          content: ''
        },
        total: null,
        telListQuery: {
          cid:this.$route.query.cid,
          page: 1,
          limit: 20
        },
        listLoading: true,
        listQuery: {
          bankname: this.$route.query.bankname,
          page: 1,
          limit: 20
        },
        ruleForm2: {
          cid:this.$route.query.cid,
          cname: '',
          cellphone: '',
          promisemoney: '',
          paytime: '',
          resutl:'',
          content: ''
        },
        ruleForm3:{
          cid:this.$route.query.cid
        },
        caseInfo:null,
        activeNames: ['1']

      };
    },
    mounted(){

      getCaseObj(this.$route.query.cid).then(response => {
        let obj = response.data.data;
        this.caseInfo = obj;
      });
      this.getList();
      this.getTelList();
      this.getContactsList();
    },
    methods: {
      selectOne(row){
        this.ruleForm2.cname = row.name;
        this.ruleForm2.cellphone = row.cellphone;
      },
      handleOne(nid){
        getCaseObj(nid).then(response => {
          let obj = response.data.data;
          this.caseInfo = obj;
        });
        this.telListQuery.cid = nid;
        this.getTelList();
        this.getContactsList();
        this.getBackmoneyList();
      },
      getList() {
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          this.list = response.data.records
          this.total = response.data.total
          this.listLoading = false
        })
      },
      getTelList(){
        this.tellistLoading = true
        telList(this.telListQuery).then(response => {
          this.telList = response.data.records
          this.tellistLoading = false
        })
      },
      getContactsList(){
        contactsList(this.telListQuery).then(response => {
          this.contactsList = response.data.records
        })
      },
      getBackmoneyList(){
       backmoneyList(this.telListQuery).then(response => {
          this.backmoneyList = response.data.records
        })
      },
      submitForm(formName) {
        request({
          url: '/admin/telRecord/insert',
          method: 'post',
          data: this.ruleForm2
        })
          .then(response => {
            if (response.data.data) {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000
              });
            } else {
              this.$notify({
                title: '失败',
                message: response.data.msg,
                type: 'error',
                duration: 2000
              })
            }
          })
      },
      submitForm3(formName) {
        request({
          url: '/admin/admin/caseContacts/insert',
          method: 'post',
          data: this.ruleForm3
        })
          .then(response => {
            if (response.data.data) {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000
              });
            } else {
              this.$notify({
                title: '失败',
                message: response.data.msg,
                type: 'error',
                duration: 2000
              })
            }
          })
      },
      handleUpdate(row) {
        this.conectionform = row;
        this.conectionFormVisible = true;
      },
      handleCreate() {
        this.dialogFormVisible = true;
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      }

    }
  }
</script>

<style lang="scss">
  .plan {
    margin: 15px 8px;
    background: #fff;
    min-height: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 5px;
    box-sizing: border-box;
  }
</style>

